<template>
  <div class="main">
    <div class="mapcontainer">
      <MarsMap :url="configUrl" @onload="onMapload" />
    </div>
    <div class="leftDiv">
      <Transition name="fate">
        <XjLeft />
      </Transition>
    </div>
    <div class="rightDiv">
      <Transition name="fate">
        <XjRight />
      </Transition>
    </div>
  </div>
</template>

<script>
import MarsMap from '../components/marsMap/index.vue'
import XjLeft from '../components/leftVue/xjLeft.vue'
import XjRight from '../components/rightVue/xjRight.vue'
import * as mars3d from 'mars3d'
const Cesium = mars3d.Cesium
let map = null
let geoJsonLayer = null
let graphicLayer = null
export default {
  name: 'HomeVue',
  components: {
    MarsMap,
    XjLeft,
    XjRight
  },
  data() {
    const basePathUrl = window.basePathUrl || ''
    return {
      configUrl: basePathUrl + 'config/config.json'
    }
  },
  computed: {},
  watch: {},
  mounted() { },
  methods: {
    // 地图构造完成回调
    onMapload(maps) {
      map = maps
      graphicLayer = new mars3d.layer.GraphicLayer()
      map.addLayer(graphicLayer)
      this.loadAdministrative();
    },
    loadAdministrative() {
      var url = "https://data.mars3d.cn/file/geojson/areas/140725.json";
      if (geoJsonLayer) {
        map.removeLayer(geoJsonLayer);
      }
      geoJsonLayer = new mars3d.layer.GeoJsonLayer({
        id: "sybj",
        url: url,
        symbol: {
          styleOptions: {
            fill: true,
            randomColor: true, // 随机色
            opacity: 0.3,
            outline: true,
            outlineStyle: {
              color: "#FED976",
              width: 3,
              opacity: 1,
            },
            // 面中心点，显示文字的配置
            label: {
              text: "{name}", // 对应的属性名称
              position: "center", // 位置
              opacity: 1,
              font_size: 25,
              color: "#fff",
              font_family: "楷体",
              outline: false,
              background: true,
              backgroundColor: "#000000",
              backgroundOpacity: 0.5,
              scaleByDistance: true,
              scaleByDistance_far: 20000000,
              scaleByDistance_farValue: 0.1,
              scaleByDistance_near: 1000,
              scaleByDistance_nearValue: 1,
            },
          },
        },
        flyTo: true,
        // flyToOptions: {
        //   pitch: -90,
        //   heading: 10,
        // },
      });
      map.addLayer(geoJsonLayer);


      geoJsonLayer.on(mars3d.EventType.load, () => {
        this.addSk()
      });
    },
    addSk() {
      var _this = this
      const skPoint = new mars3d.graphic.BillboardEntity({
        position: {
          alt: 1030.2,
          lat: 37.912844,
          lng: 112.950695
        },
        style: {
          image: 'img/marker/db.png',
          scale: 0.6,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          clampToGround: true,
          label: {
            text: '蔡庄水库',
            color: '#fff',
            clampToGround: true,
            pixelOffsetY: 20,
            background: true,
            backgroundColor: '#000'
          }
        },
        attr: {
          type: 'sk'
        },
        // flyTo: true,
        // flyToOptions: {
        //   radius: 10000,
        //   scale: 5
        // }
      })
      graphicLayer.addGraphic(skPoint)
      skPoint.on(mars3d.EventType.click, function (event) {
        _this.$router.push('/zlIndex')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: #000;

  .mapcontainer {
    width: 100%;
    height: 100%;
  }

  .leftDiv,
  .rightDiv {
    position: absolute;
    top: 8vh;
    width: 25vw;
    height: 88vh;
    padding-right: 1.5vw;
    box-sizing: border-box;
    overflow: hidden;
  }

  .leftDiv {
    left: 0;
  }

  .rightDiv {
    right: 0;
  }
}

.fate-enter-active,
.fate-leave-active {
  transition: transform 0.5s;
}

.fate-enter-from,
.fate-leave-to {
  transform: translateX(-120%);
}

.fate-enter-to,
.fate-leave-from {
  transform: translateX(0);
}
</style>
